<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>测试</title>
<link href="joints.css" rel="stylesheet">
<script type="text/javascript" src="../jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="joint.js"></script>
<!-- <script type="text/javascript" src="joinsc.js"></script> -->
<script type="text/javascript" src="uml.js"></script>
<script type="text/javascript">
$(function(){
var graph = new joint.dia.Graph;

var paper = new joint.dia.Paper({
    el: $('#paper'),
    width: 1000,
    height: 600,
    gridSize: 1,
    model: graph
});


var uml = joint.shapes.uml;

var classes = { //构建图标元素

    mammal: new uml.Interface({
        position: { x:300  , y: 50 },//位置
        size: { width: 240, height: 100 },//大小
        name: '动物',//标题名称
        attributes: ['dob: Date'],//可有可无是 uml 里面的attributes
        methods: ['+ setDateOfBirth(dob: Date): Void','+ getAgeAsDays(): Numeric']//方法
    }),

    person: new uml.Abstract({
        position: { x:300  , y: 300 },
        size: { width: 240, height: 100 },
        name: '人',
        attributes: ['firstName: String','lastName: String'],
        methods: ['+ setName(first: String, last: String): Void','+ getName(): String']
    }),

    bloodgroup: new uml.Class({
        position: { x:630 , y: 190 },
        size: { width: 220, height: 100 },
        name: '血型',
        attributes: ['bloodGroup: String'],
        methods: ['+ isCompatible(bG: String): Boolean']
    }),

    address: new uml.Class({
        position: { x:20  , y: 190 },
        size: { width: 160, height: 100 },
        name: '地址',
        attributes: ['houseNumber: Integer','streetName: String','town: String','postcode: String'],
        methods: []
    }),

    man: new uml.Class({
        position: { x:200  , y: 500 },
        size: { width: 180, height: 50 },
        name: '男人'
    }),

    woman: new uml.Class({
        position: { x:450  , y: 500 },
        size: { width: 180, height: 50 },
        name: '女人',
        methods: ['+ giveABrith(): Person []']
    })


};

_.each(classes, function(c) { graph.addCell(c); });//将图标元素加入容器
/* 
var relations = [
    new uml.Generalization({ source: { id: classes.man.id }, target: { id: classes.person.id }}),
    new uml.Generalization({ source: { id: classes.woman.id }, target: { id: classes.person.id }}),
    new uml.Implementation({ source: { id: classes.person.id }, target: { id: classes.mammal.id }}),
    new uml.Aggregation({ source: { id: classes.person.id }, target: { id: classes.address.id }}),
    new uml.Composition({ source: { id: classes.person.id }, target: { id: classes.bloodgroup.id }})
];

_.each(relations, function(r) { graph.addCell(r); }); 
*/
});
</script>

</head>
<body>

<div id="paper" ></div>
</body>
</html>